<script setup>
import { reactive, ref } from "vue";
import { editUserListApi, addUserApi, editUserApi } from '@/api/user.js'
import { ElMessage } from 'element-plus'
import { roleListApi } from '@/api/role.js'
import { useRoleStatus } from '@/hooks'
import ImageUpload from '@/components/ImageUpload/index.vue'
const roleStatus = useRoleStatus()

const emit = defineEmits(["updateList"]);
const formRef = ref()
const isShow = ref(false)

// 表单数据
const defaultData = reactive({
    username: '',
    nickname: '',
    password: '',
    email: '',
    phone: '',
    roles: [],
    avatar: '',
    status: 1,
    id:null
});
const roleSelect = ref([])
const formData = reactive({...defaultData});

// 验证规则
const formRules = {
    username: [{ required: true, message: "请选择", trigger: "blur" }],
    nickname: [{ required: true, message: "请选择", trigger: "blur" }],
    password: [{ required: true, message: "请选择", trigger: "blur" }],
    email: [{ required: true, message: "请选择", trigger: "blur" }],
    phone: [{ required: true, message: "请选择", trigger: "blur" }],
    avatar: [{ required: true, message: "请选择", trigger: "blur" }],
    status: [{ required: true, message: "请选择", trigger: "change" }],
};

// 表单提交
const onSubmit = async () => {
    // console.log(111);
    // console.log(formData.value);
    try {
        //数据校验
        await formRef.value.validate()
        //2.整理数据 
        //3.提交数据
        const data = toRaw(formData.value)
        formData.value.id ? await editUserListApi(data) : await addUserApi(data)
        //提示成功
        ElMessage.success('操作成功')
        //关闭
        isShow.value = false
        //跟新列表
        emit('updateList')
    } catch (error) {
        console.log(error);
    }
}
//数据回显
const replyData = async (id) => {
    let res = await editUserApi(id)
    // console.log(res);
    // 处理数据
    Object.assign(formData,res.data)
    const arr = res.data.roles.split(',')
    formData.roles = arr.map(item => item * 1)
}
// 获取角色列表
const rolesList = async () => {
    let res = await roleListApi()
    roleSelect.value = res.data
}
onMounted(() => {
    rolesList()
})
//关闭事件
const closeHandler = () => {
    //移除校验
    formRef.value.resetFields()
    //重置表单数据
    Object.assign(formData, { ...defaultData})
    roleSelect.value = []

}

defineExpose({
    isShow, replyData
})
</script>
<template>
    <div>
        <el-drawer v-model="isShow" size="50%" title="添加管理员"  @close="closeHandler">
            <el-form :model="formData" ref="formRef" label-width="80px" label-position="top" 
                :rules="formRules">
                <el-row :gutter="20">
                    <el-col :span="10">
                        <el-form-item label="用户名" prop="username">
                            <el-input placeholder="请输入" v-model="formData.username"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="昵称" prop="nickname">
                            <el-input placeholder="请输入" v-model="formData.nickname"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="10">
                        <el-form-item label="密码" prop="password">
                            <el-input placeholder="请输入" v-model="formData.password"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="邮箱" prop="email">
                            <el-input placeholder="请输入" v-model="formData.email"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <div style="height: 40px"></div>
                <el-row :gutter="20">
                    <el-col :span="10">
                        <el-form-item label="手机号" prop="phone">
                            <el-input placeholder="请输入" v-model="formData.phone"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">

                        <el-form-item label="启用状态" prop="status">
                            <el-radio-group v-model="formData.status">
                                <el-radio size="large" v-for="item in roleStatus" :key="item.value" :label="item.value">
                                    {{ item.label }}
                                </el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="10">
                        <el-form-item label="角色" prop="roles">
                            <el-select v-model="formData.roles" multiple filterable allow-create default-first-option
                                :reserve-keyword="false" placeholder="请选择">
                                <el-option v-for="item in roleSelect" :key="item.id" :label="item.name" :value="item.id" >
                                {{ item.name }}</el-option>>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="头像" prop="avatar">
                            <ImageUpload v-model="formData.avatar" :limit="1" :type="'adv'" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

            <template #footer>
                <div style="flex: auto">
                    <el-button @click="isShow = false">取消</el-button>
                    <el-button type="primary" @click="onSubmit">确认</el-button>
                </div>
            </template>
        </el-drawer>
    </div>
</template>

<style lang="scss" scoped></style>